<template>
    <div class="topbg">
        <div class="val">The past &gt;&gt;</div>
        <div class="banxin">
            <ul class="confather">
                <li @mouseenter="mouseEnter" @mouseleave="mouseLeave"  v-for="(item,index) in checkimg" :key="item.id" :class="index == showone ? 'uncontext' : 'context' ">
                    <img :src="item.img" alt="">
                </li>
            </ul>
        </div>
        <img class="mybgimg" :src="checkimg[showone].img" alt="">
    </div>
</template>

<script>
export default {
    data () {
        return {
            checkimg:[
                {
                    tag : 'li',
                    id : 0,
                    val : '1',
                    img : 'https://static.oschina.net/uploads/space/2017/0106/121547_hZbU_2308616.jpg'
                },
                {
                    tag : 'li',
                    id : 1,
                    val : '2',
                    img : 'https://ts1.cn.mm.bing.net/th/id/R-C.c8844d225dd6253fb78f4acd4fd95020?rik=BA0CggiG0Im1gw&riu=http%3a%2f%2fpic.221600.cn%2fforum%2f201408%2f15%2f002316cigtttxa8gcjbjki.jpg&ehk=qImHVhtZQI%2bhaRNaqmm08TykmhQ5hl6bqoUWhiknTgg%3d&risl=&pid=ImgRaw&r=0'
                },
                {
                    tag : 'li',
                    id : 2,
                    val : '3',
                    img : 'https://ts1.cn.mm.bing.net/th/id/R-C.15e970cd0765096178a6da16993cfbb1?rik=IT5KfevidZcTig&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1210%2f22%2fc0%2f14558824_1350879506501.jpg&ehk=X9ro%2fg%2fGTmsglVrbV%2bmy8c3wsAvcHseqcEhsf80RMWA%3d&risl=&pid=ImgRaw&r=0'
                },
                {
                    tag : 'li',
                    id : 3,
                    val : '4',
                    img : 'https://pic2.zhimg.com/v2-371d2fcfaa5180ab352ac941004c8e19_r.jpg'
                },
                {
                    tag : 'li',
                    id : 4,
                    val : '5',
                    img : 'https://ts1.cn.mm.bing.net/th/id/R-C.6754cb13772fe38388abf26bd710fc30?rik=Qn43gY4EXomx5g&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f97%2f3697.jpg&ehk=xNU32bprVD%2fIK%2foW2Bic6IfW8g1aQ%2fddWOrjoOned3I%3d&risl=&pid=ImgRaw&r=0'
                }
            ],
            showone : 0,
            imgsRun : null
            
        }
    },
    mounted(){
        this.imgsRun = setInterval(() => {
                this.showone ++
                if(this.showone == this.checkimg.length){
                    this.showone = 0
                }
        }, 5000)
    },
    methods :{
        mouseEnter(){
            clearInterval(this.imgsRun)
        },
        mouseLeave(){
            this.imgsRun = setInterval(() => {
                this.showone ++
                if(this.showone == this.checkimg.length){
                    this.showone = 0
                }
            }, 5000)
        }
    }
}
</script>
 
<style lang="less" scoped>
    .topbg {
        position: relative;
        overflow: hidden;
        .val {
            position: absolute;
            font-family: 'myFontTwo';
            left: 4%;
            top: 40%;
            font-size: 70px;
            color: rgb(0, 0, 0);
            cursor: default;
            font-weight: bold;
            mix-blend-mode: screen;
            z-index: 100;
            text-shadow: 1px 1px 10px rgb(255, 255, 255);
        }
        .mybgimg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            filter: blur(10px);
        }
        padding: 50px 0;
        .confather {
            height: 400px;
            position: relative;
            list-style: none;
            overflow: hidden;
            img {
                width: 100%;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                &:hover {
                    cursor: pointer;
                }
            }
            .uncontext {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                color : red;
                animation: run 5s;
                // animation-duration: 5s;
                background-color: pink;
                z-index: 10;
                &:hover {
                    // animation-duration: 0s;
                    animation: run 0s;
                }
                
            }
            .context {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                visibility: hidden;
                height: inherit;
            }
        }
    }
    @keyframes run {
        0%{
            opacity: 0;
        }
        20%{
            opacity: 1;
        }
        100%{
            opacity: 1;
        }
    }
</style>